<template>
	<view class="container">
		<u-swiper :list="list3" previousMargin="30" nextMargin="30" circular :autoplay="true" radius="5"
			bgColor="#ffffff"></u-swiper>

		<view class="mt" style="display: flex; justify-content: space-around; padding: 15px; border-radius: 10px;">
			<view v-for="(item,index) in taglist" :key="index">
				<u-icon @click="tagClick(index)" :name="item.name" labelPos="bottom" color="black" :label="item.label"
					size="28"></u-icon>
			</view>
		</view>

		<view class=".mt" style="">
			<u-list@scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in 5" :key="index">
					<u-cell @click="cellClick(index)" style="height: 100%;" isLink rightIcon="arrow-right" :title="`2024-09-03-${index + 1}`">
						<view slot="title" style="display: flex; margin-bottom: 10px; justify-content: space-between;">
							<text style="font-size: 25px; color: green;">2024-09-03</text>
							<view style="display: flex; margin-top: 10px; position: absolute; right: 20px;">
								<u-badge :isDot="true" type="success"></u-badge>
							</view>
						</view>
						<view slot="label" style="display: flex; flex-direction: column;">
							<text style="font-size: 20px; font-weight: 500;">学生姓名：123</text>
							<text>联系方式：13133333333</text>
							<text>学员生日：2020-09-09</text>
							<text>报名日期：2020-09-09</text>
							<text>结业日期：2020-09-09</text>
							<text>喜好：2020-09-09</text>
							<text>特殊情况：2020-09-09</text>
						</view>
					</u-cell>
				</u-list-item>
			</u-list>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list3: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				taglist: [{
					name: "list",
					label: "我的列表",
				}, {
					name: "clock",
					label: "未跟进",
				}, {
					name: "checkmark-circle",
					label: "已跟进",
				}, {
					name: "grid",
					label: "筛选",
				}]
			}
		},
		methods: {
			tagClick(index) {
				console.log(index);
			},
			//滑动到底部触发
			scrolltolower() {
				console.log("滑动到底部");
			},
			//cell点击方法
			cellClick(index) {
				uni.navigateTo({
					url: "./detail/detail_index",
				});
				console.log(index);
			}
		}
	}
</script>

<style>
	.container {
		padding: 15px;
		font-size: 14px;
		line-height: 24px;
	}

	.mt {
		margin-top: 15px;
		background-color: white;
	}

	text {
		margin-bottom: 10px;
	}
</style>